<!--作者:于大明-->
<template>
    <view class="product-item" :id="inputItem.id" style="content-visibility: auto;contain-intrinsic-size: 260rpx;">
		<!-- title、note设置标题和小文字 -->
		<!-- hover-class="hd-active-item-hover"  hover-start-time="800" -->
		<uni-list-item direction="row"  :clickable="false"
			:class="{'hd-active-item-hover':inputItem.select}"
			:to="`/pages/_common/productDetail/productDetail?id=${inputItem.id}`">
			<!-- 通过v-slot:header插槽定义列表左侧的图片显示，其他内容通过List组件内置属性实现-->
			<template v-slot:header>
				<!-- <text class="text-index">1️⃣2️⃣</text> -->
				<!-- 当前判断长度只为简单判断类型，实际业务中，根据逻辑直接渲染即可 -->
				<!-- https://ext.dcloud.net.cn/plugin?id=10748 --> 
				<trigger-lazyLoad imageModel="aspectFill"  height="150rpx" width="200rpx" :src="inputItem.productUrl" class="image-1" :loadSrc="$cw.ImgLoadingUrl" />
			</template>
		
			<template v-slot:body>
				<view class="uni-list-item__content" >
					<text class="uni-list-item__content-title">
						{{ inputItem.productName }}
					</text>
		
					<view class="uni-list-item__content-note">
						<uni-icons type="calendar" size="12"></uni-icons>
						<text style="margin-left: 2rpx;" >
							{{$filters.timeAgo(inputItem.productCreateTime)}}
							<!-- {{$filters.parseShortDayTime(inputItem.activeBeginTime,inputItem.activeEndTime)}} -->
						</text>
					</view>
				</view>
			</template>
		
			<template v-slot:footer>
				<view class="d-flex flex-column j-center" >
					<view class="text-orange font-weight" style="margin-left: 6rpx;line-height: 1.2;">
						<text class="font-22">¥</text>
						<text class="font-30">{{inputItem.productPrice.toFixed(2)}}</text>
					</view>
				</view>
			</template>
		
		</uni-list-item>
		
	</view>
</template>

<script src="./product-item.js"></script>

<style lang="less" scoped>
    @import url('product-item.less');
</style>
